<md-dialog aria-label="{{ 'ADMINCONSOLE.DIALOG.ADD_USER.TITLE' | translate }}"
           style="max-width: 800px;">
    <form name="vm.newUserForm" ng-submit="vm.submit()" novalidate style="overflow: initial;" layout-padding>
        <md-dialog-content layout="column" layout-padding>
            <div>
                <h2>{{ 'ADMINCONSOLE.DIALOG.ADD_USER.TITLE' | translate }}</h2>
            </div>

            <div layout="column">
                <div layout="row" layout-align="start center">
                    <div flex-gt-sm="60" flex="80" layout="row" layout-align="center center">
                        <div flex-gt-sm="80" flex="100">
                            <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                                <label>{{ 'ADMINCONSOLE.DIALOG.ADD_USER.LABEL_NAME' | translate }}</label>
                                <input name="name" unique-name ng-model="vm.user.name" md-maxlength="16" required>
                                <div ng-messages="vm.newUserForm.name.$error" ng-if="vm.newUserForm.$submitted || vm.newUserForm.name.$touched">
                                    <div ng-message="required">{{ 'ADMINCONSOLE.DIALOG.ADD_USER.ERROR.NAME_REQUIRED' | translate }}</div>
                                    <div ng-message="md-maxlength">{{ 'ADMINCONSOLE.DIALOG.ADD_USER.ERROR.NAME_TOO_LONG' | translate }}</div>
                                    <div ng-message="unique">{{ 'ADMINCONSOLE.DIALOG.ADD_USER.ERROR.NAME_NOT_UNIQUE' | translate }}</div>
                                </div>
                            </md-input-container>
                        </div>
                    </div>
                </div>

                <div style="width: 200px; padding-left: 40px;">
                    <md-radio-group md-theme="eBlockerThemeRadio"
                                    ng-model="vm.user.userRole"
                                    ng-change="vm.userRoleChange()"
                                    class="md-primary">
                        <md-radio-button ng-repeat="userRole in vm.userRoles" ng-value="userRole" >{{'ADMINCONSOLE.DIALOG.ADD_USER.LABEL_' + userRole  | translate }}</md-radio-button>
                    </md-radio-group>
                </div>

                <div ng-show="vm.user.userRole === 'CHILD'"
                     layout="row" layout-align="start center"
                     style="padding-left: 40px;">
                    <span style="font-weight: bold; font-size: 16px;" translate="ADMINCONSOLE.DIALOG.ADD_USER.LABEL_BIRTHDAY"></span>
                    <eb-date-picker date="vm.user.birthday" placeholder-label="{{'ADMINCONSOLE.DIALOG.ADD_USER.PLACEHOLDER_DATE' | translate }}"></eb-date-picker>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row"
                           layout-align="end center"
                           layout-xs="column"
                           layout-align-xs="center center"
                           style="padding-right: 16px;">
            <md-button type="button" ng-click="vm.cancel()" class="md-raised md-secondary">{{ 'ADMINCONSOLE.DIALOG.ADD_USER.ACTION.CANCEL' | translate }}</md-button>
            <md-button type="submit" class="md-raised md-primary md-accent">{{ 'ADMINCONSOLE.DIALOG.ADD_USER.ACTION.OK' | translate }}</md-button>
        </md-dialog-actions>
    </form>
</md-dialog>
